<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
  <title>React App</title>
  <link href="./static/css/main.css" rel="stylesheet" />
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script type="text/javascript" src="./static/js/main.js"></script>
</body>
<script>
  var treeData = [
    { key: "1", title: "我我我我我我我我我我我我我" },
    { key: "1.1", title: "a1.1", pid: "1", path: "1", isLeaf: true },
    { key: "1.2", title: "1.2", pid: "1", path: "1" },
    {
      key: "1.2.1",
      title: "1.2.1",
      pid: "1.2",
      path: "1/1.2",
      isLeaf: true,
    },
    { key: "1.2.2", title: "1.2.2", pid: "1.2", path: "1/1.2" },
    { key: "1.2.2.1", title: "1.2.2.1", pid: "1.2.2", path: "1/1.2/1.2.2" },
    {
      key: "1.2.2.1.1",
      title: "1.2.2.1.1",
      pid: "1.2.2.1",
      path: "1/1.2/1.2.2/1.2. 2.1",
      isLeaf: true,
    },
    {
      key: "1.2.2.1.2",
      title: "1.2.2.1.2",
      pid: "1.2.2.1",
      path: "1/1.2/1.2.2/1.2. 2.1",
      isLeaf: true,
    },
    {
      key: "1.2.2.2",
      title: "1.2.2.2",
      pid: "1.2.2",
      path: "1/1.2/1.2.2",
      isLeaf: true,
    },
    { key: "1.3", title: "1.3", pid: "1", path: "1" },
    { key: "1.3.1", title: "1.3.1", pid: "1.3", path: "1/1.3" },
    {
      key: "1.3.1.1",
      title: "1.3.1.1",
      pid: "1.3.1",
      path: "1/1.3/1.3.1",
      isLeaf: true,
    },
    {
      key: "1.3.1.2",
      title: "1.3.1.2",
      pid: "1.3.1",
      path: "1/1.3/1.3.1",
      isLeaf: true,
    },
    { key: "1.3.2", title: "1.3.2", pid: "1.3", path: "1/1.3" },
    {
      key: "1.3.2.1",
      title: "1.3.2.1",
      pid: "1.3.2",
      path: "1/1.3/1.3.2",
      isLeaf: true,
    },
    {
      key: "1.3.2.2",
      title: "1.3.2.2",
      pid: "1.3.2",
      path: "1/1.3/1.3.2",
      isLeaf: true,
    },
    {
      key: "1.3.3",
      title: "1.3.3",
      pid: "1.3",
      path: "1/1.3",
      isLeaf: true,
    },
    { key: "2", title: "2" },
    { key: "2.1", title: "2.1", pid: "2", path: "2" },
    {
      key: "2.1.1",
      title: "2.1.1",
      pid: "2.1",
      path: "2/2.1",
      isLeaf: true,
    },
    { key: "2.1.2", title: "2.1.2", pid: "2.1", path: "2/2.1" },
    {
      key: "2.1.2.1",
      title: "2.1.2.1",
      pid: "2.1.2",
      path: "2/2.1/2.1.2",
      isLeaf: true,
    },
    { key: "2.2", title: "2.2", pid: "2", path: "2" },
    { key: "2.2.1", title: "2.2.1", pid: "2.2", path: "2/2.2" },
    {
      key: "2.2.1.1",
      title: "2.2.1.1",
      pid: "2.2.1",
      path: "2/2.2/2.2.1",
      isLeaf: true,
    },
    {
      key: "2.2.1.2",
      title: "2.2.1.2",
      pid: "2.2.1",
      path: "2/2.2/2.2.1",
      isLeaf: true,
    },
    {
      key: "2.2.2",
      title: "2.2.2",
      pid: "2.2",
      path: "2/2.2",
      isLeaf: true,
    },
    { key: "3", title: "3" },
    { key: "3.1", title: "3.1", pid: "3", path: "3", isLeaf: true },
    { key: "3.2", title: "3.2", pid: "3", path: "3", isLeaf: true },
    { key: "4", title: "4", isLeaf: true },
  ];

  window.target = new window.sv.form.TreeSelect({
    onlySelectLeaf: false,
    renderTo: "root",
    data: treeData,
    value: [1, 2],
    displayValue: ["a", "b"],
    igronSelectField: "title",
    limitCount: 12,
    canInput: true,
    delay: 500,
    mutliple: true,
    placeholder: "请填⼊",
    displayField: "title",
    expandAll: true,
    height: 400,
    width: 400,
    onChange: function (v) {
      console.info(v);
    },
  });
</script>

</html>